<template>
     <div>
        <!-- <input type="text" :vlaue = "ipt" @input = fn>
       <span>{{ipt}}</span> -->
       <input type="text" v-model="ipt">
        <hr>
       <Son v-model="count"></Son>
       <hr>
         <h1>{{sum}}</h1>
        <Girl></Girl>
        <hr>
         <div>
             <button @click="tab=a">a组件</button>
             <button  @click="tab=b">b组件</button>
         </div>
       
        <!-- <A/>
        <B/> -->
        <component :is="tab"></component>
        <hr>
            <!-- keep-alives是缓存组件，在他里面写的组件可以被缓存住 -->
            <button @click="flag = !flag">点击我切换组件</button>
            <!-- 组件该销毁得时候不销毁，下一次进入这个组件也不重新创建 -->
               <keep-alive >
                   <C v-if="flag"></C>
                  <D v-else></D>
               </keep-alive>
               
          <hr>
          <Duigui :arr="arr"></Duigui>
          
     </div>
</template>

<script>
 import A from "./components/a.vue"
 import B from "./components/b.vue"
import Girl from './components/girl.vue';
import Son from './components/son.vue';
import C from "./components/c.vue"
import D from "./components/d.vue"
import Duigui from "./components/duigui.vue" // 自己调用自己叫递归
// 递归组件适用于渲染深层次数据，且每一次数据的格式都一样

// import Son from "./components/son.vue"
export default {
  components: { Son, Girl ,A,B,C,D,Duigui},
     data(){
       return{
          a:A,
          b:B,
          tab:A,
         ipt:"",
         count:0,
         sum:10,
         flag:true,
         arr:[
            {
               tit:"董事长",
               id:10001,
               children:[
                  {
                     tit:"总经理",
                     id:10002,
                     children:[
                        {
                           tit:"部们经理",
                           id:10005
                        }
                     ]
                  }
               ]
            }
           
         ]
       }
     },
     methods:{
       fn(e) {
          console.log(e.target.value);
          this.ipt = e.target.value
       }
    },
   
}
</script>

<style>

</style>